<script setup lang="ts">
import { ref,computed,onUnmounted,onMounted } from 'vue'


import MaterialCard from '@/components/MaterialCard.vue'

// 组件卸载时执行
onUnmounted(() => {
  // 清除定时器，避免内存泄漏
  stopTimer1()
})
onMounted(() => {
  // 组件挂载时开启定时器
  startTimer1()
})

const bottom = ref<number>(7)
const addBottom = () => {
  bottom.value==2?bottom.value=7:bottom.value=2


}

//#region 第一个列表
// 修改原有的列表渲染，将 v-for 改为 v-for=" item in paginatedList"
const list = ref([
  {
    date: '3171102002',
    name: '100.00%',
    address: '100.00%',
    e: '0.07',
    a: '0',
    d: 'T001-1',
  },
  {
    date: '3171102003',
    name: '100.00%',
    address: '45.00%',
    e: '0.08',
    a: '5',
    d: 'T001-2',
  },
  {
    date: '3171102004',
    name: '88.00%',
    address: '40.00%',
    e: '0.09',
    a: '10',
    d: 'T001-3',
  },
  {
    date: '3171102005',
    name: '92.00%',
    address: '42.00%',
    e: '0.10',
    a: '8',
    d: 'T001-4',
  },
  {
    date: '3171102006',
    name: '78.00%',
    address: '35.00%',
    e: '0.11',
    a: '15',
    d: 'T001-5',
  },
  {
    date: '3171102007',
    name: '85.00%',
    address: '40.00%',
    e: '0.12',
    a: '12',
    d: 'T001-6',
  },
  {
    date: '3171102008',
    name: '90.00%',
    address: '45.00%',
    e: '0.13',
    a: '10',
    d: 'T001-7',
  },
  {
    date: '3171102009',
    name: '85.00%',
    address: '40.00%',
    e: '0.14',
    a: '12',
    d: 'T001-8',
  },
  {
    date: '3171102010',
    name: '85.00%',
    address: '40.00%',
    e: '0.15',
    a: '12',
    d: 'T001-9',

  },{
    date: '3171102011',
    name: '85.00%',
    address: '40.00%',
    e: '0.16',
    a: '12',
    d: 'T001-10',

  },{
    date: '3171102012',
    name: '85.00%',
    address: '40.00%',
    e: '0.17',
    a: '12',
    d: 'T001-11',
  },{
    date: '3171102013',
    name: '85.00%',
    address: '40.00%',
    e: '0.18',
    a: '12',
    d: 'T001-12',
  },{
    date: '3171102014',
    name: '85.00%',
    address: '40.00%',
    e: '0.19',
    a: '12',
    d: 'T001-13',
  },{
    date: '3171102015',
    name: '85.00%',
    address: '40.00%',
    e: '0.20',
    a: '12',
    d: 'T001-14',

  },{
    date: '3171102016',
    name: '85.00%',
    address: '40.00%',
    e: '0.21',
    a: '12',
    d: 'T001-15',
  },{
    date: '3171102017',
    name: '85.00%',
    address: '40.00%',
    e: '0.22',
    a: '12',
    d: 'T001-16',
  },{
    date: '3171102018',
    name: '85.00%',
    address: '40.00%',
    e: '0.23',
    a: '12',
    d: 'T001-17',

  },
  {
    date: '3171102007',
    name: '85.00%',
    address: '40.00%',
    e: '0.12',
    a: '12',
    d: 'T001-6',
  },
  {
    date: '3171102008',
    name: '90.00%',
    address: '45.00%',
    e: '0.13',
    a: '10',
    d: 'T001-7',
  },
  {
    date: '3171102009',
    name: '85.00%',
    address: '40.00%',
    e: '0.14',
    a: '12',
    d: 'T001-8',
  },
  {
    date: '3171102010',
    name: '85.00%',
    address: '40.00%',
    e: '0.15',
    a: '12',
    d: 'T001-9',

  },{
    date: '3171102011',
    name: '85.00%',
    address: '40.00%',
    e: '0.16',
    a: '12',
    d: 'T001-10',

  },{
    date: '3171102012',
    name: '85.00%',
    address: '40.00%',
    e: '0.17',
    a: '12',
    d: 'T001-11',
  },{
    date: '3171102013',
    name: '85.00%',
    address: '40.00%',
    e: '0.18',
    a: '12',
    d: 'T001-12',
  },{
    date: '3171102014',
    name: '85.00%',
    address: '40.00%',
    e: '0.19',
    a: '12',
    d: 'T001-13',
  },{
    date: '3171102015',
    name: '85.00%',
    address: '40.00%',
    e: '0.20',
    a: '12',
    d: 'T001-14',

  },{
    date: '3171102016',
    name: '85.00%',
    address: '40.00%',
    e: '0.21',
    a: '12',
    d: 'T001-15',
  },{
    date: '3171102017',
    name: '85.00%',
    address: '40.00%',
    e: '0.22',
    a: '12',
    d: 'T001-16',
  },{
    date: '3171102018',
    name: '85.00%',
    address: '40.00%',
    e: '0.23',
    a: '12',
    d: 'T001-17',

  },
  {
    date: '3171102007',
    name: '85.00%',
    address: '40.00%',
    e: '0.12',
    a: '12',
    d: 'T001-6',
  },
  {
    date: '3171102008',
    name: '90.00%',
    address: '45.00%',
    e: '0.13',
    a: '10',
    d: 'T001-7',
  },
  {
    date: '3171102009',
    name: '85.00%',
    address: '40.00%',
    e: '0.14',
    a: '12',
    d: 'T001-8',
  },
  {
    date: '3171102010',
    name: '85.00%',
    address: '40.00%',
    e: '0.15',
    a: '12',
    d: 'T001-9',

  },{
    date: '3171102011',
    name: '85.00%',
    address: '40.00%',
    e: '0.16',
    a: '12',
    d: 'T001-10',

  },{
    date: '3171102012',
    name: '85.00%',
    address: '40.00%',
    e: '0.17',
    a: '12',
    d: 'T001-11',
  },{
    date: '3171102013',
    name: '85.00%',
    address: '40.00%',
    e: '0.18',
    a: '12',
    d: 'T001-12',
  },{
    date: '3171102014',
    name: '85.00%',
    address: '40.00%',
    e: '0.19',
    a: '12',
    d: 'T001-13',
  },{
    date: '3171102015',
    name: '85.00%',
    address: '40.00%',
    e: '0.20',
    a: '12',
    d: 'T001-14',

  },{
    date: '3171102016',
    name: '85.00%',
    address: '40.00%',
    e: '0.21',
    a: '12',
    d: 'T001-15',
  },{
    date: '3171102017',
    name: '85.00%',
    address: '40.00%',
    e: '0.22',
    a: '12',
    d: 'T001-16',
  },{
    date: '3171102018',
    name: '85.00%',
    address: '40.00%',
    e: '0.23',
    a: '12',
    d: 'T001-17',

  },
  {
    date: '3171102007',
    name: '85.00%',
    address: '40.00%',
    e: '0.12',
    a: '12',
    d: 'T001-6',
  },
  {
    date: '3171102008',
    name: '90.00%',
    address: '45.00%',
    e: '0.13',
    a: '10',
    d: 'T001-7',
  },
  {
    date: '3171102009',
    name: '85.00%',
    address: '40.00%',
    e: '0.14',
    a: '12',
    d: 'T001-8',
  },
  {
    date: '3171102010',
    name: '85.00%',
    address: '40.00%',
    e: '0.15',
    a: '12',
    d: 'T001-9',

  },{
    date: '3171102011',
    name: '85.00%',
    address: '40.00%',
    e: '0.16',
    a: '12',
    d: 'T001-10',

  },{
    date: '3171102012',
    name: '85.00%',
    address: '40.00%',
    e: '0.17',
    a: '12',
    d: 'T001-11',
  },{
    date: '3171102013',
    name: '85.00%',
    address: '40.00%',
    e: '0.18',
    a: '12',
    d: 'T001-12',
  },{
    date: '3171102014',
    name: '85.00%',
    address: '40.00%',
    e: '0.19',
    a: '12',
    d: 'T001-13',
  },{
    date: '3171102015',
    name: '85.00%',
    address: '40.00%',
    e: '0.20',
    a: '12',
    d: 'T001-14',

  },{
    date: '3171102016',
    name: '85.00%',
    address: '40.00%',
    e: '0.21',
    a: '12',
    d: 'T001-15',
  },{
    date: '3171102017',
    name: '85.00%',
    address: '40.00%',
    e: '0.22',
    a: '12',
    d: 'T001-16',
  },{
    date: '3171102018',
    name: '85.00%',
    address: '40.00%',
    e: '0.23',
    a: '12',
    d: 'T001-17',

  },
  {
    date: '3171102007',
    name: '85.00%',
    address: '40.00%',
    e: '0.12',
    a: '12',
    d: 'T001-6',
  },
  {
    date: '3171102008',
    name: '90.00%',
    address: '45.00%',
    e: '0.13',
    a: '10',
    d: 'T001-7',
  },
  {
    date: '3171102009',
    name: '85.00%',
    address: '40.00%',
    e: '0.14',
    a: '12',
    d: 'T001-8',
  },
  {
    date: '3171102010',
    name: '85.00%',
    address: '40.00%',
    e: '0.15',
    a: '12',
    d: 'T001-9',

  },{
    date: '3171102011',
    name: '85.00%',
    address: '40.00%',
    e: '0.16',
    a: '12',
    d: 'T001-10',

  },{
    date: '3171102012',
    name: '85.00%',
    address: '40.00%',
    e: '0.17',
    a: '12',
    d: 'T001-11',
  },{
    date: '3171102013',
    name: '85.00%',
    address: '40.00%',
    e: '0.18',
    a: '12',
    d: 'T001-12',
  },{
    date: '3171102014',
    name: '85.00%',
    address: '40.00%',
    e: '0.19',
    a: '12',
    d: 'T001-13',
  },{
    date: '3171102015',
    name: '85.00%',
    address: '40.00%',
    e: '0.20',
    a: '12',
    d: 'T001-14',

  },{
    date: '3171102016',
    name: '85.00%',
    address: '40.00%',
    e: '0.21',
    a: '12',
    d: 'T001-15',
  },{
    date: '3171102017',
    name: '85.00%',
    address: '40.00%',
    e: '0.22',
    a: '12',
    d: 'T001-16',
  },{
    date: '3171102018',
    name: '85.00%',
    address: '40.00%',
    e: '0.23',
    a: '12',
    d: 'T001-17',

  },
  {
    date: '3171102007',
    name: '85.00%',
    address: '40.00%',
    e: '0.12',
    a: '12',
    d: 'T001-6',
  },
  {
    date: '3171102008',
    name: '90.00%',
    address: '45.00%',
    e: '0.13',
    a: '10',
    d: 'T001-7',
  },
  {
    date: '3171102009',
    name: '85.00%',
    address: '40.00%',
    e: '0.14',
    a: '12',
    d: 'T001-8',
  },
  {
    date: '3171102010',
    name: '85.00%',
    address: '40.00%',
    e: '0.15',
    a: '12',
    d: 'T001-9',

  },{
    date: '3171102011',
    name: '85.00%',
    address: '40.00%',
    e: '0.16',
    a: '12',
    d: 'T001-10',

  },{
    date: '3171102012',
    name: '85.00%',
    address: '40.00%',
    e: '0.17',
    a: '12',
    d: 'T001-11',
  },{
    date: '3171102013',
    name: '85.00%',
    address: '40.00%',
    e: '0.18',
    a: '12',
    d: 'T001-12',
  },{
    date: '3171102014',
    name: '85.00%',
    address: '40.00%',
    e: '0.19',
    a: '12',
    d: 'T001-13',
  },{
    date: '3171102015',
    name: '85.00%',
    address: '40.00%',
    e: '0.20',
    a: '12',
    d: 'T001-14',

  },{
    date: '3171102016',
    name: '85.00%',
    address: '40.00%',
    e: '0.21',
    a: '12',
    d: 'T001-15',
  },{
    date: '3171102017',
    name: '85.00%',
    address: '40.00%',
    e: '0.22',
    a: '12',
    d: 'T001-16',
  },{
    date: '3171102018',
    name: '85.00%',
    address: '40.00%',
    e: '0.23',
    a: '12',
    d: 'T001-17',

  },
  {
    date: '3171102007',
    name: '85.00%',
    address: '40.00%',
    e: '0.12',
    a: '12',
    d: 'T001-6',
  },
  {
    date: '3171102008',
    name: '90.00%',
    address: '45.00%',
    e: '0.13',
    a: '10',
    d: 'T001-7',
  },
  {
    date: '3171102009',
    name: '85.00%',
    address: '40.00%',
    e: '0.14',
    a: '12',
    d: 'T001-8',
  },
  {
    date: '3171102010',
    name: '85.00%',
    address: '40.00%',
    e: '0.15',
    a: '12',
    d: 'T001-9',

  },{
    date: '3171102011',
    name: '85.00%',
    address: '40.00%',
    e: '0.16',
    a: '12',
    d: 'T001-10',

  },{
    date: '3171102012',
    name: '85.00%',
    address: '40.00%',
    e: '0.17',
    a: '12',
    d: 'T001-11',
  },{
    date: '3171102013',
    name: '85.00%',
    address: '40.00%',
    e: '0.18',
    a: '12',
    d: 'T001-12',
  },{
    date: '3171102014',
    name: '85.00%',
    address: '40.00%',
    e: '0.19',
    a: '12',
    d: 'T001-13',
  },{
    date: '3171102015',
    name: '85.00%',
    address: '40.00%',
    e: '0.20',
    a: '12',
    d: 'T001-14',

  },{
    date: '3171102016',
    name: '85.00%',
    address: '40.00%',
    e: '0.21',
    a: '12',
    d: 'T001-15',
  },{
    date: '3171102017',
    name: '85.00%',
    address: '40.00%',
    e: '0.22',
    a: '12',
    d: 'T001-16',
  },{
    date: '3171102018',
    name: '85.00%',
    address: '40.00%',
    e: '0.23',
    a: '12',
    d: 'T001-17',

  }


])
// 分页状态管理
const currentPage = ref(1)      // 当前页码
const pageSize = ref(3)         // 每页显示数量
const totalItems = ref(list.value.length)      // 总数据量（图片中显示共36条）


// 计算总页数
const totalPages = computed(() => {
  // 使用Math.ceil向上取整，确保即使有剩余数据也能显示为一页
  return Math.ceil(totalItems.value / pageSize.value)
})

// 计算当前页要显示的数据
// 计算当前页要显示的数据
const paginatedList = computed(() => {
// 计算起始索引（从0开始）
const start = (currentPage.value - 1) * pageSize.value
// 计算结束索引
const end = start + pageSize.value
// 从完整数据列表中截取当前页数据
return list.value.slice(start, end)
})

// 生成页码列表（如：[1, 2, 3, 4, 5, 6, '...', 8]）
const pageNumbers = computed(() => {
  const pages = []
  const maxVisiblePages = 7  // 最多显示5个连续页码
  let startPage = 1
  let endPage = totalPages.value

  // 如果总页数超过最大可见页码数，需要计算显示范围
  if (totalPages.value > maxVisiblePages) {
    // 计算起始页码，确保当前页位于中间位置
    startPage = Math.max(1, currentPage.value - Math.floor(maxVisiblePages / 2))
    // 计算结束页码
    endPage = Math.min(totalPages.value, startPage + maxVisiblePages - 1)

    // 如果起始页码大于1，添加省略号
    if (startPage > 1) {
      pages.push(1)
      if (startPage > 2) {
        pages.push('...')
      }
    }
  }

  // 添加可见页码
  for (let i = startPage; i <= endPage; i++) {
    pages.push(i)
  }

  // 如果结束页码小于总页数，添加省略号和最后一页
  if (endPage < totalPages.value) {
    if (endPage < totalPages.value - 1) {
      pages.push('...')
    }
    pages.push(totalPages.value)
  }

  return pages
})

// 分页交互函数
// 上一页
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
  } else {
    uni.showToast({ title: '已经是第一页了', icon: 'none' })
  }
}

// 下一页
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
  } else {
    uni.showToast({ title: '已经是最后一页了', icon: 'none' })
  }
}

// 跳转到指定页码
const goToPage = (page: number) => {
  // 确保页码在有效范围内
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page
  }
}


// 控制定时器开启和关闭
const timer = ref<boolean>(false)
// 定时器ID - 用于存储setInterval的返回值，以便后续清除
const timerId = ref<number | null>(null)
/**
 * 自动翻页函数
 * 功能：自动切换到下一页，如果是最后一页则切换到第一页
 * 参数：无
 * 返回值：无
 */
const autoTurnPage = () => {
  currentPage.value = currentPage.value < totalPages.value ? currentPage.value + 1 : 1
}
/**
 * 开启定时器
 * 功能：启动自动翻页定时器
 * 参数：无
 * 返回值：无
 */
const startTimer1 = () => {
  stopTimer1() // 确保先停止已有定时器
  timerId.value = window.setInterval(autoTurnPage, 3000)
  timer.value = true
  console.log('自动翻页已开启')
}
// 停止定时器
//  功能：停止自动翻页定时器
const stopTimer1 = () => {
  if (timerId.value !== null) {
    window.clearInterval(timerId.value)
    timerId.value = null
  }
  timer.value = false
  console.log('自动翻页已停止')
}
//#endregion


</script>

<!-- 三个按钮  工工艺  物料  条码 -->
<template>
  <view v-if="false">
    <view class="bottom">
      <button @click="addBottom">加</button>
    </view>
   <MaterialCard  :itemsList="['条码', '工艺', '物料']">

    <template #header>
      <view>
        <scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" style="height: 500px;">
                <!-- 配料核对-明细-条码 -->
                <view  scroll-y="true">
                    <view class="top-list-title" v-for="i in bottom" :key="i">

                        <view class="top-list-title-item">
                            <view class="top-list-title-item-title">
                                22122342131412
                            </view>
                            <view class="top-list-title-item-title"> 行1项 </view>
                        </view>
                        <view class="top-list-title-item">
                            <view class="top-list-title-item-title">
                                <checkbox value="cb" selectedColor="#3399FF" class="function-input1-checkbox"
                                    :checked="true" />核对
                            </view>
                            <view class="top-list-title-item-title">
                                <checkbox value="cb" selectedColor="#3399FF" class="function-input1-checkbox"
                                    :checked="true" />投料
                            </view>
                        </view>
                        <view class="top-list-title-item">
                            <view class="top-list-title-item-title">
                                编码
                            </view>
                            <view class="top-list-title-item-title">名称 </view>
                        </view>
                        <view class="top-list-title-item">
                            <view class="top-list-title-item-title">
                                RM199932
                            </view>
                            <view class="top-list-title-item-title"> RM199932@ff </view>
                        </view>

                    </view>
                </view>
        </scroll-view>
      </view>
    </template>
   </MaterialCard>
  </view>
   <!-- 列表 -->
    <view style="
        background-color: rgb(13 24 83); 
        border: 1px solid #0e659f; padding-bottom: 30px; padding-top: 10px;">
      <view style="text-align: center;">
        <label style="width: 100%; display: table; color: #fff;">
          <tr>
            <th style="width: 15%; border-bottom: 1px solid #FFFFFF;">单号</th>
            <th style="border-bottom: 1px solid #FFFFFF;">称量占比</th>
            <th style="border-bottom: 1px solid #FFFFFF;">生产占比</th>
            <th style="border-bottom: 1px solid #FFFFFF;">计划产量</th>
            <th style="border-bottom: 1px solid #FFFFFF;">实际产量</th>
            <th style="border-bottom: 1px solid #FFFFFF;">批号</th>

          </tr>
          <tr :style="{'borderBottom': '1px solid #FFFFFF',color:item.name==='100.00%'?item.address=='100.00%'?'#6EC28F':'yellow':'#fff'}" v-for="item in paginatedList" :key="item.date">
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.date }}</td>
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.name }}</td>
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.address }}</td>
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.a }}</td>
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.e }}</td>
            <td style="border-bottom: 1px solid #FFFFFF;">{{ item.d }}</td>
          
          </tr>
        </label>

        <view>
          <!-- 分页控件 -->
          <view style="display: flex;  margin-top: 20px; align-items: center;">
            <!-- 总数据量显示 -->
            <text style="color: white;">共 {{ totalItems }} 条</text>
          
           
          
            <!-- 上一页按钮 -->
            <button style="background-color: #0e659f; color: white; margin-right: 5px; " 
              @click="prevPage" :disabled="currentPage === 1"
              :style="currentPage === 1 ? { backgroundColor: '#cccccc', cursor: 'not-allowed' } : { backgroundColor: '#0e659f' }">&lt;</button>
          
            <!-- 页码列表 -->
            <view v-for="page in pageNumbers" :key="page" style="margin: 0 2px;">
              <!-- 处理省略号 -->
              <text v-if="page === '...'" style="color: white; line-height: 38px;">...</text>
          
              <!-- 页码按钮 -->
              <button v-else style="min-width: 38px; height: 38px; line-height: 38px; padding: 0;" 
                @click="typeof page === 'number' && goToPage(page)"
                :style="currentPage === page ? 
                  { backgroundColor: '#3399FF', color: 'white', fontWeight: 'bold' } : 
                  { backgroundColor: 'transparent', color: 'white' }">{{ page }}</button>

            </view>
          
            <!-- 下一页按钮 -->
            <button style="background-color: #0e659f; color: white; margin-left: 5px; min-width: 30px;" 
              @click="nextPage" :disabled="currentPage === totalPages"
              :style="currentPage === totalPages ? { backgroundColor: '#cccccc', cursor: 'not-allowed' } : { backgroundColor: '#0e659f' }">&gt;</button>
          
          
          </view>
        </view>

      </view>
    </view>

</template>

<style scoped>
/* 条码列表*/
.top-list-title {
    padding: 10px 10px;
    margin-bottom: 10px;
    background-color: #fff;
    border-radius: 10px;

}

.top-list-title-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    /* 设置宽度为100% */

}

.top-list-btn-item.active {
    background-color: #3399FF;
    /* 蓝色背景表示选中状态 */
    color: white;
    /* 白色文字 */
    font-weight: bold;
    /* 加粗文字 */
    border-bottom: none;
    /* 移除底部边框 */
}

.top-list-title-item>view {
    flex: 1;
    /* 让子元素平均分宽度 */
}

.top-list-title-item-title {
    text-align: center;
}







</style>


